---
id: hero
title: Hero
---

import Playground from '@theme/Playground';

## Default

<Playground>
  <div class="hero shadow--lw">
    <div class="container">
      <h1 class="hero__title">Hero Title</h1>
      <p class="hero__subtitle">Not all heroes wear capes</p>
      <div>
        <button class="button button--secondary button--outline button--lg">
          Get Started
        </button>
      </div>
    </div>
  </div>
</Playground>

## Dark

<Playground>
  <div class="hero hero--dark">
    <div class="container">
      <h1 class="hero__title">Hero Title</h1>
      <p class="hero__subtitle">Not all heroes wear capes</p>
      <div>
        <button class="button button--primary button--outline button--lg">
          Get Started
        </button>
      </div>
    </div>
  </div>
</Playground>

## Primary

Contents are vertically-centered.

<Playground>
  <div class="hero hero--primary" style={{height: '25rem'}}>
    <div class="container">
      <h1 class="hero__title">Hero Title</h1>
      <p class="hero__subtitle">Not all heroes wear capes</p>
      <div>
        <button class="button button--secondary button--lg">Get Started</button>
      </div>
    </div>
  </div>
</Playground>
